<template>
    <div id="manage-class">
        <div class="manage-class-search">
            <el-form :inline="true" class="demo-form-inline clearfix" :model="form">
                  <span class="demonstration">年级 : &nbsp;</span>
                  <el-cascader
                    :options="dataList"
                     v-model="selectedOptions"
                      change-on-select
                      clearable
                     :props="cascaderconfig"
                     expand-trigger="hover"
                  >
                  </el-cascader>
                  <div class="button-style" style="margin-left:20px" @click="search" >搜 索</div>
                   <el-form-item style="float: right;">
                        <div class="button-style" style="width:90px;" @click="deleteFn">批量删除</div>
                        <div class="button-style" style="width:90px; margin-left: 20px;" @click="addFn">添 加</div>
                    </el-form-item>
            </el-form>
        </div>
        <div class="table">
            <el-table  :data="tableData" ref="multipleTable"  style="width: 100%"   @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="60"></el-table-column>
                <el-table-column prop="name" label="班级名称"></el-table-column>
                <el-table-column prop="id" label="班级编号"></el-table-column>
                <el-table-column prop="grade" label="年级" width="100"></el-table-column>
                <el-table-column prop="studentNum" label="学生数量"></el-table-column>
                <el-table-column prop="teachingStatus" label="教学状态">
                    <template slot-scope="scope">
                        {{scope.row.ended?'结课':'正在教学中'}}
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="300">
                    <template slot-scope="scope">
                        <el-button @click="repeatFn(scope.row.id,scope.row.name,scope.row.grade)" type="text" v-if="scope.row.ended==false" size="small">修改</el-button>
                        <el-button type="text" size="small" style=' color:#727272' v-if="scope.row.ended==true">修改</el-button>
                        <el-button @click="ending(scope.row.id,scope.row.ended)" type="text" size="small" v-if="scope.row.ended==false">结课</el-button>
                        <el-button type="text" size="small" style=' color:#727272' v-if="scope.row.ended==true">结课</el-button>
                        <el-button type="text" size="small"  style=' color:#727272' v-if="scope.row.ended==true">管理学生</el-button>
                        <el-button @click="mangeStudent(scope.row.id)" type="text" size="small" v-if="scope.row.ended==false"> 管理学生 </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pagesize"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
            </el-pagination>
        </div>
         <el-dialog :close-on-click-modal="false"  title="修改" :visible.sync="dialogable" width="550px" >
            <el-form class="demo-form-inline clearfix" :inline="true" :model="formInline"  label-width="90px">
                <el-form-item label="班级名称：" >
                    <el-input v-model="formInline.user" placeholder="请输入班级名称" maxlength="20"></el-input>
                </el-form-item>
                <el-form-item label="年级：">
                    <el-input-number v-model="formInline.class" controls-position="right" @change="handleChange" :min="2015"></el-input-number>
                </el-form-item>
            </el-form>
            <div class="button-style" style="width:90px; margin:0 auto; display:block" @click="onSubmit">保 存</div>
         </el-dialog>    
    </div>
</template>

<script>
    export default {
        data () {
            return {
                arr:[],
                cascaderconfig: {
                    value: "name",
                    label: "name",
                },
                //弹窗
                dialogable:false,
                //弹窗配置
                formInline:{
                    user:'',
                    class:'',
                },
                //默认选中数组
                selectedOptions:[],
                form:{

                },
                //自定义班级id
                classId:'',
                options:[],
                //赋值下拉联动
                dataList:[],
                name:'',
                //课程id
                courseId:'',
                tableData: [],
                currentPage: 1,
                pagesize: 10,
                totalCount: 1000,
                multipleSelection: [],
                //接收详情页面参数
                params:'',
                
            }
        },
        created(){
            this.courseId = this.$localstorage.getLocalStorage('setCourseId')
            this.getList()  
        },
        methods: {
            //获取数据
            getList(){
                let self = this 
                self.$http.get("/tes/course/"+self.courseId+"/search/list-class?allFlag=true&defaultClassFlag=false").then((response) => {            
                    let res = response.data
                    if(res.code == '200') {
                        self.dataList =  self.setData(res.data)
                        //self.getValue()   
                        self.$nextTick(()=>{
                            self.init() 
                        })
                      
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //获取默认值方式
            getValue(){
                let self = this
                console.log(self.dataList,11)
                self.dataList.forEach(function(item) {
                if (item.defaultedClass == true) {
                    self.selectedOptions.push(item.name)
                }
                if (item.children) {
                    item.children.forEach(function(it) {
                    if (it.defaultedClass == true) {
                        self.selectedOptions.push(it.name)
                    }
                    })
                }
                });
                console.log(self.selectedOptions, 99)
                return self.selectedOptions
            },
            // 处理数据变成2级
            setData(list){
               let arrList = []
               let self = this
               for(var i=0; i< list.length; i++){
                    let obj ={}
                    obj.name = list[i].name
                    obj.defaultedClass = list[i].defaultedClass
                     let children= []
                     let children2 = list[i].children
                    if( children2 && children2 != null){
                         for(var j =0; j<children2.length; j++){
                               let obj2={}
                               obj2.name = children2[j].name
                               obj2.defaultedClass = children2[j].defaultedClass
                               children.push(obj2)   
                         }
                    }
                     if(children.length>0){
                        obj.children = children
                     }
                     arrList.push(obj) 
                }
                 return arrList;  
                
            },
            //获取列表数据
            init(){
                let self = this
                if(self.selectedOptions[0]===undefined ||  self.selectedOptions[0]=='全部'){
                    self.selectedOptions[0]=''
                    self.selectedOptions[1]=''
                }else if(self.selectedOptions[1]===undefined || self.selectedOptions[1]=='全部'){
                    self.selectedOptions[1]=''
                }
                self.$http.get('/tes/course/'+self.courseId+'/class/page?pageNum='+self.currentPage +'&pageSize='+self.pagesize +'&classStatus='+self.selectedOptions[0]+'&grade='+self.selectedOptions[1]).then((response) => {  
                    let res = response.data
                    if(res.code == '200') {
                        self.tableData =  res.data.content
                        self.totalCount = res.data.total
                        if(res.data.total==0){
                            self.$router.push({ path: "/Teaching/index" });
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //搜索
            search(){
                this.currentPage = 1
                this.init()
            },
            //修改
            repeatFn(id,name,grade){
               this.dialogable = true
               this.classId=id
               this.formInline.user =name
               this.formInline.class =grade
            },
            //保存
            onSubmit(){
               let self = this
                self.$http.put('/tes/course/'+self.courseId+'/class/'+self.classId,{
                    grade: self.formInline.class,
                    name:self.formInline.user
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '修改成功',
                            type: 'success'
                        })
                        self.init()
                        self.dialogable = false
                        self.getList()
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //结课方法 
            commonFn(classId,message){
                let self = this
                self.$confirm(''+message+',确定结课吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.put('/tes/course/'+self.courseId+'/class/'+classId+'/end-class?errorFlag=true') .then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '结课成功',
                                type: 'success'
                            })
                           // self.init()
                            self.getList()
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(err => {
                     console.log(err)
                 })
            },
            //结课
            ending(classId,ended){  
                let self = this
                self.$confirm('确定结课吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.put('/tes/course/'+self.courseId+'/class/'+classId+'/end-class?errorFlag=') .then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '结课成功',
                                type: 'success'
                            })
                            //self.init()
                            self.getList()
                        }else if(res.code == '501'){
                            this.commonFn(classId, res.message)
                        } else{
                            self.$message.error(res.message)
                        }
                    })
			    }).catch(err => {
                     console.log(err)
                })
            },
            //计数
            handleChange(value) {
                //console.log(value);
            },
            //全选
			handleSelectionChange(val) {
				let valArr = []
				for(let i = 0; i < val.length; i++){
					valArr.push(val[i].id)
				}
                this.multipleSelection = valArr
            },
            //删除方法
             commonDelete(list,message){
                let self = this
                self.$confirm(''+message+',确定删除吗？', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                }).then(() => {
                    self.$http.post('/tes/course/'+self.courseId+'/class/batch-delete?errorFlag=true',list) .then((response) => {
                        let res = response.data
                        if(res.code == '200') {
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
                            //self.init()
                            self.getList()
                        }else{
                            self.$message.error(res.message)
                        }
                    })
                }).catch(err => {
                     console.log(err)
                })
            },
            //批量删除
            deleteFn(){
                let self = this;
				if(self.multipleSelection.length == 0){
                    self.$message({
                        message: '请选择要删除的内容',
                        type: 'warning'
                    })
					return
                }
				self.$confirm('是否删除选中?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {  
					self.$http.post('/tes/course/'+self.courseId+'/class/batch-delete?errorFlag=',self.multipleSelection).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
							self.currentPage = 1
                           // self.init()
                            self.getList()
                        }else if(res.code == '501'){
                            self.commonDelete(self.multipleSelection,res.message)
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {
				})
            },
            //分页
			handleSizeChange: function (size) {
				this.pagesize = size;
			},
			handleCurrentChange: function(currentPage) {
                this.currentPage = currentPage
                this.init()
            },
            //学生管理
            mangeStudent(caseId){
                this.$router.push({ path: '/Teaching/MyCourses/Management/ManageClass/ManageStudent' ,query: { id: caseId }})
            },
            //添加
            addFn(){
                let self =this
                self.params = true
                this.$router.push({ path: '/Teaching/AddClass' ,query: { flag: self.params, flagFns:self.flagFns}})
            }
        }
    }
</script>
<style scoped>
    .el-button--text:hover{
         color: #1277eb;
    }
    .el-input-number.is-controls-right>>>.el-input-number__increase{
        line-height: 15px;
    }
    .el-input-number{
        position: relative;
        display: inline-block;
        line-height: 32px;
        overflow: hidden;
        width: auto;
    }
    .el-input-number>>>.el-input-number__increase{
        top: 1px;
    }
    .el-input-number.is-controls-right>>>.el-input-number__decrease{
         bottom: 1px;
    }
    .el-input-number>>>.el-input .el-input__inner{
        width: 100px;
    }
</style>
<style lang="scss" scoped>
    #manage-class{
        .manage-class-search{
            margin: 23px 0 25px;
            height: 32px;
            .button-style{
                width: 90px;
            }
            .el-form-item{
                margin-right: 25px;
            }
        }
    }
</style>
